// 登录界面，有普通用户、医疗点、root三种权限
<template>
    <div class="form_wrapper">
        <el-form :model="loginForm" label-width="120px" :rules="loginRules" ref="loginForm">

            <el-form-item label="登陆身份">
                <el-radio-group v-model="loginForm.permission">
                    <el-radio label="User" >普通用户</el-radio>
                    <el-radio label="Medical_point" >医疗机构</el-radio>
                    <el-radio label="Root" >管理员</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="用户名" prop="username">
                <el-input v-model="loginForm.username" />
            </el-form-item>

            <el-form-item label="密码" prop="password">
                <el-input v-model="loginForm.password" type="password" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="login">登录</el-button>
                <el-button @click="toRegsiter">没有账号？前往注册</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {Request} from "../../utils/request"
import {ElMessage} from 'element-plus'

export default {
    name: 'PMSLogin',
    data() {
        return {
            loginForm: {
                username: '',
                password: '',
                permission: 'User'
            },
            loginRules: {
                username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
            }
        }
    },
    methods: {
        login() {
            this.$refs.loginForm.validate(valid => {
                if(valid) {
                    Request({
                        url: '/login',
                        method: 'post',
                        data: this.loginForm
                    }).then(res => {
                        if(typeof(res) === 'object' &&'permission' in res) {
                            sessionStorage.setItem('username', this.loginForm.username)
                            this.$router.push('/home/' + this.loginForm.username)
                        }
                        else {
                            ElMessage({
                                message: res,
                                type: 'error',
                                duration: 3 * 1000
                            })
                        }
                    })
                }
            })
        },
        toRegsiter() {this.$router.push('/register')}
    }    
}
</script>

<style scoped>
.form_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: var(--el-color-primary-light-7);
}
</style>